<script lang="ts">
	import Highcharts from 'highcharts';
    import ExportingModule from 'highcharts/modules/exporting';
	import { Chart } from '@highcharts/svelte';

    import { angle1, mo1, mo2, tor1, tor2 } from '$lib/data';

    let options: Highcharts.Options = $state({});
	let options1: Highcharts.Options = $state({});

    ExportingModule(Highcharts);

    $effect(() => {
		options = {
			chart: {
				type: 'spline',
				width: 560,
				height: 500,
			},
			colors:["#fa4b42"],
			title: {
				text: '主动肘关节'
			},
			series: [{
				name: "扭矩",
				data: $tor2
			}],
			credits: {
				enabled: false, // 不显示版权 logo
			},
			tooltip:{
				style:{
					fontSize:20
				},
				valueSuffix:"N·m"
			},
			xAxis:{
				title:{
					text:'时间'
				},
				// categories: ['Apples', 'Bananas', 'Oranges']
			},
			yAxis:{
				title:{
					text:'扭矩(N·m)'
				}
			}
		};
		options1 = {
			chart: {
				type: 'spline',
				width: 560,
				height: 500,
			},
			colors:["#feb56a"],
			title: {
				text: '被动肘关节'
			},
			series: [{
				name: "角度",
				data: $mo2,
				dashStyle: 'longdash',
				lineWidth: 4
			}],
			credits: {
				enabled: false // 不显示版权 logo
			},
			tooltip:{
				style:{
					fontSize:20
				},
				valueSuffix:"°"
			},
			xAxis:{
				title:{
					text:'时间'
				},
				// categories: ['Apples', 'Bananas', 'Oranges']
			},
			yAxis:{
				title:{
					text:'角度(°)'
				},
				labels: {
					formatter:function(){
						if(this.value <= 30) {
							return "安全角度("+this.value+")";
						}else if(this.value >30 && this.value <=55) {
							return "锻炼角度("+this.value+")";
						}else {
							return "危险角度("+this.value+")";
						}
					}
				},
				max: 120,
			}
		};
	});

</script>

<div class="mt-4 grid place-items-center grid-cols-2 gap-1">
    <Chart options={options} highcharts={Highcharts}/>
	<Chart options={options1} highcharts={Highcharts}/>
</div>